<template>
	<view class="page-container">
		<view class="padded-15">
			<view class="padded-15" style="">
					<view class="border-radius-60 bg-CCCCCC" style="width: 100px; height: 100px; margin: 0 auto; overflow: hidden;">
					<image :src="getImageUrl()" mode="widthFix" style="width: 100px;"></image>
				</view>
			</view>
			<uni-forms ref="form" :rules="rules" :modelValue="formData">
				<view class="form-container">
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="用户名" label-width="80" required name="name">

								<!-- <uni-easyinput v-model="formData.name" :inputBorder="false" placeholder="请输入" /> -->
								<view class="pull-right padded-t-10 color-646D7F">{{ formData.name }}</view>
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="昵称" label-width="80" name="nickname">
							<uni-easyinput v-model="formData.nickname" :inputBorder="false" placeholder="请输入" />
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="性别" label-width="80" name="sex">
							<view class="">
								<uni-data-checkbox v-model="formData.sex" :localdata="sexs" />
							</view>
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="所在地" label-width="80" name="location">
							<picker mode="multiSelector" :range="multiSelect" :range-key="'name'" @columnchange="onColumnChange" @change="onPickerChange">
							      <view class="picker">{{ selectedAddress || '省-市-区' }}</view>
							</picker>
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="详细地址" label-width="80" name="address">
							<uni-easyinput v-model="formData.address" :inputBorder="false" placeholder="请输入" />
						</uni-forms-item>
					</view>
				</view>
				<view class="padded-60"></view>
				<view class="page-bottom clearfix">
					<view class="cancle-btn pull-left" @click="back()">
						<button type="default" class="font-14 bg-FFFFFF padded-t-10 padded-b-10">取消</button>
					</view>
					<view class="save-btn pull-left padded-l-10">
						<button type="primary" class="font-14 padded-t-10 padded-b-10"  @click="submit">保存</button>
					</view>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.getbd();
			this.getServerData();
			this.getssq();
		},
		data() {
			return {
				multiSelect: [[], [], []], // 省市区三级数据
				provinces: [], // 省列表
				cities: [], // 市列表
				districts: [], // 区列表
				pcd:[],
				selectedAddress: '' ,// 选中的地址
				selectedAddressid: [],
				
				formData: {
					name: 'GL12020',
					nickname: '张三',
					sex: 1,
					address: ''
				},
				rules: {},
				sexs: [
					{
						text: '男',
						value: 1
					},
					{
						text: '女',
						value: 2
					},
					{
						text: '其他',
						value: 3
					}
				],
				locations: [],
				headimgurl: "/static/image/head.jpg",
			}
		},
		methods: {
			getbd(id) {
				uni.request({
					url: 'https://wn.wdyky.com/index/jrgl/my', 
					method: 'GET',
					data: {
					},
					success: (res) => {
						if(res.data.code == 1){ 
							let data = res.data.data;
							this.formData.name = data.tels;
							this.formData.nickname = data.nickname;
							
							this.formData.address = data.xxdz;
							this.selectedAddressid = data.szd;
							
							let szds = data.szds;
							this.selectedAddress = szds;
							
							this.formData.sex = data.sex;
							
							this.headimgurl = data.headimgurl;
						}
						//console.log('GET请求成功：', res.data);
					},
					fail: (err) => {
						console.error('GET请求失败：', err);
					}
				});
			},
			onLocationChange(e) {
				console.log('onchange:', e);
			},
			getServerData() {
				this.$request().then(res => {
					// 验证登入
				})
			},
			getssq() {
				  uni.request({
				      url: 'https://wn.wdyky.com/index/jrgl/ajaxarea', // 请求地址
				      success: (res) => {
				        // 请求成功的回调函数
				  		if(res.data.code == 1){ 
							console.log('请求成功:', res.data);
				  			this.pcd = res.data.data;
							this.provinces = this.pcd[1];
				  			this.multiSelect[0] = this.pcd[1];
							this.cities = this.pcd[2];
							this.multiSelect[1] = this.cities;
							this.districts = this.pcd[52];
							this.multiSelect[2] = this.districts;
				  		}
				  
				      },
				      fail: function(err) {
				          // 请求失败的回调函数
				          console.error('请求失败:', err);
				      }
				});
			},
			async loadCities(provinceId) {
				this.cities = this.pcd[provinceId];
				this.multiSelect[1] = this.cities;
				// 重置区和街道数据
				this.districts = this.pcd[this.cities[0].id];
				this.multiSelect[2] = this.pcd[this.cities[0].id];
			},
			async loadDistricts(cityId) {
				
			    this.districts = this.pcd[cityId];
			    this.multiSelect[2] = this.districts;
			},
			async onColumnChange(e) {
				
			      const { column, value } = e.detail;
			      
			      switch(column) {
			        case 0: // 省变化
			          const selectedProvince = this.provinces[value];
			          await this.loadCities(selectedProvince.id);
			          break;
			        case 1: // 市变化
			          const selectedCity = this.cities[value];
			          await this.loadDistricts(selectedCity.id);
			          break;
			      }
			      // 注意：在某些平台，直接赋值multiSelect可能不会自动更新视图，需要使用this.$set或重新赋值整个数组
			      //this.$set(this.multiSelect, column + 1, this.multiSelect[column + 1]);
			},
			onPickerChange(e) {
					
			      const values = e.detail.value;
			      const province = this.provinces[values[0]];
			      const city = this.cities[values[1]];
			      const district = this.districts[values[2]];
			
			      this.selectedAddress = `${province.name}${city.name}${district.name}`;
				  this.selectedAddressid = [];
				  this.selectedAddressid.push(province.id);
				  this.selectedAddressid.push(city.id);
				  this.selectedAddressid.push(district.id);
				  console.log('selectedAddressid，携带值为', this.selectedAddressid);
			      // 触发父组件事件
			      this.$emit('change', {
			        province,
			        city,
			        district
			      });
			},
			change_radio(e) {
			    // 获取选中的值
			    this.dbyq = e.detail.value;
			    //console.log('选中的值:', this.dbyq);
			    // 这里可以添加你的逻辑
			},
			submit(){
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/mysave', // 你的API接口地址
				    method: 'GET',
				    data: {
						//name: this.formData.name,
						nickname: this.formData.nickname,
						sex: this.formData.sex,
						address: this.formData.address,
						szd: this.selectedAddressid,
				    },
				    success: (res) => {
						
						if(res.data.code != 1){
							uni.showToast({
								icon: 'none',
								title: res.data.val
							})
						}
						if(res.data.code == 1){
							uni.showToast({
								icon: 'none',
								title: res.data.val
							})
							uni.navigateBack();
						}
						//console.log('请求成功:', res.data);
				    },
				    fail: (err) => {
				        console.error('GET请求失败：', err);
				    }
				});
				
				/*
				if(this.enterprise==''){
					uni.showToast({
						icon: 'none',
						title: "请输入单价"
					})
				}
				*/
			},
			getImageUrl(){
				return this.headimgurl;
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/product.scss';
	
	.form-container {
		background: #FFFFFF;
		border-radius: 15px;
		
		.form-item-view {
			padding: 15px 10px;
			
			.uni-forms-item {
				margin: 0;
				
				::v-deep .uni-data-checklist {
					
					.checklist-group {
						justify-content: flex-end;
						
						.checklist-box {
							margin: 10px 0;
							margin-left: 25px;
							margin-right: 0;
						}
					}
					
				}
				
				.uni-easyinput__placeholder-class {
					text-align: right;
					color: #646D7F;
					font-size: 14px;
				}
				
				::v-deep .uni-input-input {
					text-align: right;
				}
				
				::v-deep .input-value-border {
					border: none;
					padding-right: 0;
				}
				
				::v-deep .arrow-area {
					display: none;
				}
				
				::v-deep .selected-area {
					justify-content: flex-end;
					color: #646D7F;
					font-size: 14px;
				}
				
				::v-deep .selected-list {
					justify-content: flex-end;
				}
				
			}
		}
	}
	
	.page-bottom {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 15px;
		padding-bottom: 30px;
		background: #FAFAFA;
		
		.cancle-btn {
			width: 90px;
		}
		
		.save-btn {
			width: calc(100% - 90px);
		}
	}
	
</style>
